<!--带收缩功能的form表单，用于查询条件收缩-->
<template>
  <el-form inline :label-width="labelWidth?labelWidth:'70px'" :size="size?size:'mini'">
    <slot :shrink="shrink"></slot>

    <div style="display: inline-block" :style="{width: active&&blockWhenActive?itemWidth:'auto'}"
         :class="{'display-block': blockWhenActive&&active}">
      <el-form-item>
        <slot name="confirmBtn">
          <el-button type="primary" @click="confirmBtnClickHandler">{{confirmText?confirmText:defConfirmText}}
          </el-button>
        </slot>
        <el-button v-if="showResetBtn" @click="resetBtnClickHandler">{{defResetText}}</el-button>
        <el-button v-if="showShrinkBtn" type="text" @click="displayItems">
          {{parseShrinkBtnText()}}
          &nbsp;
          <i :class="{
          'el-icon-arrow-up': active,
          'el-icon-arrow-down': !active
        }"></i>
        </el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
  export default {
    name: "ShrinkForm",
    props: [
      'showRowNum',
      'size',
      'labelWidth',
      'confirmText',
      'acitveText',
      'inactiveText',
      'showResetBtn'
    ],
    data() {
      return {
        // 收缩展开状态
        active: false,
        // （自动）收缩按钮显示隐藏状态
        showShrinkBtn: true,
        itemWidth: 0,
        // 默认显示行数
        defShowNum: 1,
        // 收缩会隐藏的label
        shrink: [],
        // 确定按钮配置
        defConfirmText: '查询',
        // 重置按钮配置
        defResetText: '重置',
        // 收缩按钮配置
        defActiveText: '收起',
        defInactiveText: '展开',
        // 是否在展开时让按钮单独一行
        blockWhenActive: false
      }
    },
    mounted() {
      if (this.showRowNum)
        this.defShowNum = parseInt(this.showRowNum);
      this.findShrinkItem();
      window.onresize = () => {
        this.resetHideStatus();
        this.findShrinkItem();
      };

      // window.addEventListener(
      //   "resize",this.findShrinkItem,false
      // );
    },
    methods: {
      /**
       * 查找会被隐藏的item，并缓存起来
       */
      findShrinkItem() {
        let formItem = this.$slots.default;
        if (formItem.length > 0) {
          // 过滤获取所有可展示item
          formItem = formItem.filter((it) => {
            return it.tag != null;
          });

          let itemWidth = formItem[0].elm.offsetWidth + 10;
          let formWidth = this.$el.offsetWidth;
          let maxShowNum = parseInt(formWidth / itemWidth) * this.defShowNum - 1;

          // 如果表单里item数量等于最大显示数量，那就没必要显示收缩按钮了
          if (formItem.length === maxShowNum)
            this.showShrinkBtn = false;
          else
            this.showShrinkBtn = true;

          // 如果显示之后的item数量是偶数，那么查询按钮要单独一行
          if (formItem.length % (maxShowNum + 1) === 0) {
            this.blockWhenActive = true;
            this.itemWidth = itemWidth * (maxShowNum + 1) + 'px';
          } else {
            this.blockWhenActive = false;
          }

          let j = 0;
          formItem.forEach((item, i) => {
            // 有标签必定会有tag，没有的都不是展示实体
            // if(item.tag) {
            // 当判断没有sid存在时，会自动加上，隐藏显示需要用到
            // if(!item.data) {
            //   item.data = {attrs: {id: 'sid'+i}};
            // } else if(item.attrs) {
            //   item.data.attrs = {id: 'sid'+i};
            // } else
            //   item.data.attrs.id = 'sid'+i;

            if (j >= maxShowNum) {
              this.shrink.push(item.data.attrs.id);
              // let cls = document.getElementById(item.data.attrs.id).className.split(' ');
              // cls.push('shrink-hide')
              // document.getElementById(item.data.attrs.id).className = cls.join(' ');
              document.getElementById(item.data.attrs.id).style.display = 'none';
            }
            j++;
            // }
          });
          // console.info(formItem)
        }
      },
      resetHideStatus() {
        let formItem = this.$slots.default;
        if (formItem.length > 0) {
          formItem.forEach((item) => {
            if (item.tag) {
              let itemDom = document.getElementById(item.data.attrs.id);
              itemDom.style.display = 'inline-block';
            }
          });
        }
      },
      /**
       * 显示隐藏
       */
      displayItems() {
        this.active = !this.active;
        let formItem = this.$slots.default;
        if (formItem.length > 0) {
          formItem.forEach((item) => {
            if (item.tag) {
              let itemDom = document.getElementById(item.data.attrs.id);
              // let cls = itemDom.className.split(' ');
              if (this.shrink.indexOf(item.data.attrs.id) > -1) {
                if (this.active) {
                  // cls.splice(cls.indexOf('shrink-hide'), 1);
                  // itemDom.className = cls.join(' ');
                  itemDom.style.display = 'inline-block';
                } else {
                  // cls.push('shrink-hide')
                  // itemDom.className = cls.join(' ');
                  itemDom.style.display = 'none';
                }
              }
            }
          });
        }

      },
      /**
       * 确认按钮点击回调（当确认按钮没被替换前）
       * @param e
       */
      confirmBtnClickHandler(e) {
        this.$emit('confirm', e);
      },
      /**
       * 重置按钮点击回调
       * @param e
       */
      resetBtnClickHandler(e) {
        this.$emit('reset', e);
      },
      /**
       * 获取收缩按钮文本
       * @returns {string}
       */
      parseShrinkBtnText() {
        if (this.active) {
          return this.activeText ? this.activeText : this.defActiveText;
        } else {
          return this.inactiveText ? this.inactiveText : this.defInactiveText;
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .shrink-hide {
    display: none !important;
  }

  .display-block {
    display: block !important;
    text-align: right;
  }
</style>
